import React , {Component} from 'react';
import {View,Text,Image,StyleSheet,TouchableHighlight} from 'react-native';
// import { Colors } from 'react-native/Libraries/NewAppScreen';
// import { wrap } from 'module';
import Swiper from 'react-native-swiper';
// import { height } from 'window-size';
// import { Actions } from 'react-native-router-flux'

import {
  StackNavigator,
  TabNavigator
} from 'react-navigation';


export default class Home extends Component{
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#26a2ff',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: '800',
      textAlign:'center'

    },
  };
  constructor(props){
    super(props);
    this.state = {
      lunbo: [],
    }
  }

  componentWillMount(){
    this.getlunbo()
  }

  render(){
    return <View>
      {/* 轮播图 */}
      <View style={{height:200}}>
        <Swiper style={styles.wrapper} showsButtons={true} autoplay loop={true}>
        {
          this.state.lunbo.map((item,i)=>{
            return <View style={styles.slide1} key={i}>
              <Image style={{width:"100%",height:'100%'}} source={{uri: 'http://www.xyfight.com/'+item.img}}></Image>
            </View>
          })
        }
        </Swiper>
      </View>
      {/* 9宫格 */}
      <View style={styles.gird_container}>
        <View style={styles.gird_item}>
          <Image  style={styles.gird_img} source={require('../../images/menu1.png')}></Image>
          <Text onPress={()=>{this.props.navigation.navigate('NewsList')}}>新闻资讯</Text>
        </View>
        <View style={styles.gird_item}>
          <Image  style={styles.gird_img} source={require('../../images/menu2.png')}></Image>
          <Text onPress={()=>{this.props.navigation.navigate('Photo')}}>拍照功能</Text>
        </View>
        {/* <TouchableHighlight onPress={()=>{this.props.navigation.navigate('MovieList')}} > */}
        <View style={styles.gird_item}>
          <Image style={styles.gird_img} source={require('../../images/menu3.png')}></Image>
          <Text onPress={()=>{this.props.navigation.navigate('MovieList')}}>热映视频</Text>
        </View>
        {/* </TouchableHighlight> */}
        <View style={styles.gird_item}>
          <Image  style={styles.gird_img} source={require('../../images/menu4.png')}></Image>
          <Text onPress={()=>{this.props.navigation.navigate('Tester')}}>小小功能</Text>
        </View>
        <View style={styles.gird_item}>
          <Image  style={styles.gird_img} source={require('../../images/menu5.png')}></Image>
          <Text onPress={()=>{alert('功能待开发中')}}>吃喝玩乐</Text>
        </View>
        <View style={styles.gird_item}>
          <Image  style={styles.gird_img} source={require('../../images/menu6.png')}></Image>
          <Text onPress={()=>{alert('功能待开发中')}}>琴棋书花</Text>
        </View>
      </View>

      <View style={{paddingTop:50}}>
        <Text>本软件仅供测试，开发。。。</Text>
      </View>
    </View>
  }

  // 方法
  getlunbo=()=>{
    fetch('http://www.xyfight.com/api/getlunbo')
      .then(res=>res.json())
      .then(data=>{
        this.setState({
          lunbo: data.message
        })
      })
  }
}




const styles = StyleSheet.create({
  gird_container:{
    flexDirection: 'row',
    flexWrap:'wrap',

  },
  gird_item: {
    alignItems:'center',
    width: '33%',
    marginTop: 15
  },
  gird_img:{
    width: 66,
    height:66
  },  

  wrapper: {height:200},
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
})